<template>
  <el-form label-width="100px">
    <el-form-item label="1.通知标题:" :required="true">
      <el-input
        v-model="form.title"
        style="width: 400px"
        maxlength="10"
        show-word-limit
        class="input"
        placeholder="请输入通知主题"
      />
    </el-form-item>
    <el-form-item label="2.通知内容:" :required="true">
      <el-input
        v-model="form.content"
        style="width: 400px"
        type="textarea"
        :rows="6"
        maxlength="50"
        show-word-limit
        placeholder="请输入要通知的内容"
      />
    </el-form-item>
    <el-form-item label="3.通知时间:" :required="true">
      <el-date-picker
        v-model="form.time"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        :picker-options="options"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :disabled="form.id !== null"
      />
    </el-form-item>
    <el-form-item>
      <el-button style="width: 150px" @click="() => { this.$emit('close') }">取消</el-button>
      <el-button v-if="!form.id" style="width: 150px" type="primary" @click="create">新增通知</el-button>
      <el-button v-else style="width: 235px" type="primary" @click="update">更新通知</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { createNotify, updateNotify } from '../../../api/notify'
import { mapGetters } from 'vuex'
export default {
  name: 'NotifyDialog',
  props: {
    form: {
      type: Object,
      default: function() {
        return {
          id: null,
          title: '',
          content: '',
          link: null,
          author: null,
          time: []
        }
      }
    },
    total: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      startStyle: '',
      endStyle: '',
      options: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    create() {
      const config = this.form
      config['author'] = this.name
      createNotify(this.form).then(() => {
        this.$SUCCESS('通知创建成功')
        this.$close()
        this.$reload()
      }).catch(() => {
        this.$ERROR('通知创建失败')
      })
    },
    update() {
      updateNotify(this.form).then(() => {
        this.$SUCCESS('通知更新成功')
        this.$close()
        this.$reload()
      }).catch(() => {
        this.$ERROR('通知更新失败')
      })
    }
  }
}
</script>

<style scoped>

</style>
